<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: aqua;
    }
    #box2 {
      width: 250px;
      height: 250px;
      background-color: rgb(0, 255, 0);
    }
    #box3 {
      width: 200px;
      height: 200px;
      background-color: rgb(73, 18, 201);
    }
  </style>
  <body>
    <div id="box1">
      <div id="box2">
        <div id="box3"></div>
      </div>
    </div>
    <div>
      <a id="a" href="https://www.baidu.com">1</a>
    </div>
    <script>
      /* 
            
        在DOM中有各种不同类型的对象
            - 多种事件对象都有一个共同的祖先Event
                比如mouseEvent -> UIEvent -> Event
                - event.target 触发事件的对象
                - event.currentTarget 绑定事件的对象(同this)
                - event.stopPropagation() 停止事件的传导
                - event.preventDefault() 取消默认行为
            事件的冒泡(bubble)
                - 事件的冒泡就是值得事件向上传导(一层一层向上box3-box2-box1,都会有,同时如果你点box3的box1位置,也能触发box1.因为也在冒泡)
                - 当元素上的某个事件被触发后,其祖先元素上相同的事件也会同时触发
                    - 冒泡的存在大大简化了代码的编写,但是在一些场景我们不希望冒泡存在
                        - 不希望冒泡触发的时候,可以通过事件对象去取消冒泡

        在事件的响应函数中:
            event.target 表示的是触发事件的对象
            this 表示的是绑定事件的对象
            两者的差别在于
            比如:box2在box1内,在box1绑定了一个单击响应事件
            我点击了box2,这个时候box2因为冒泡的存在,会触发box1的单击响应事件
            所以此时event.target指的是box2,虽然box2没有事件,但是因为冒泡,因此他触发了box1.
            而this指的绑定事件的对象是box1,触发的是哪个事件,就是哪个事件的对象

        */
      const box1 = document.getElementById('box1');
      const box2 = document.getElementById('box2');
      const box3 = document.getElementById('box3');
      const a = document.getElementById('a');
      box1.addEventListener('click', function (event) {
        console.log(event.target);
        console.log(this);
      });
      //    停止box3的 冒泡事件传导,此时box1的单击响应事件不会被传导到box3中
      box3.addEventListener('click', (event) => {
        event.stopPropagation();
      });
      box2.addEventListener('click', (event) => {
        alert('SDSDS');
      });
      a.addEventListener('click', (event) => {
        alert('SDSDS');
        //此时会因为超链接的默认行为是会跳转链接的,如果我们不想,有更好的办法
        // 利用事件对象的属性来操作
        event.preventDefault();
      });
    </script>
  </body>
</html>
